<template>
  <div class="fooddata-data">
    <el-card :body-style="{ padding: '0px' }">
      <div slot="header">
        <tools-btn
          :toolsData="toolsData"
          @addData="addData"
          @refresh="refresh"
          @search="search"
          @fieldSet="fieldSet"
          @hasOperation="hasOperation"
        />
      </div>
      <table-list
        id="tableExcel"
        :table="table"
        ref="tableList"
        @handleEdit="handleEdit"
        @handleDel="handleDel"
      >
        <template
          slot-scope="props"
          slot="permissionId"
        >
          <span v-text="props.obj.row.permissionId === '1' ? '超级管理员' : props.obj.row.permissionId === '2' ? '餐饮公司' : props.obj.row.permissionId === '3' ? 
            '清洗公司':'监督人员'"
          />
        </template>
      </table-list>
      <pagination
        :page="page"
        @pageSizeChange="pageSizeChange"
        @pageCurrentChange="pageCurrentChange"
      />
    </el-card>
    <!-- 添加、修改弹出框 -->
    <el-dialog
      :title="editDialog.title"
      v-if="editDialog.visible"
      :visible.sync="editDialog.visible"
      @close="closeDialog('editDialog')"
      width="30%"
    >
      <el-form
        :model="editDialog.data"
        ref="editDialog.data"
        label-width="90px"
      >
        <el-form-item label="名称">
          <el-input
            v-model="editDialog.data.person_name"
            size="mini"
          />
        </el-form-item>
        <el-form-item label="职务">
          <el-input
            v-model="editDialog.data.duties"
            size="mini"
          />
        </el-form-item>
        <el-form-item label="地址">
          <el-input
            v-model="editDialog.data.address"
            size="mini"
          />
        </el-form-item>
        <el-form-item label="经度">
          <el-input
            v-model="editDialog.data.hx_longtitude"
            size="mini"
          />
        </el-form-item>
        <el-form-item label="纬度">
          <el-input
            v-model="editDialog.data.hx_latitude"
            size="mini"
          />
        </el-form-item>
        <el-form-item label="用户名">
          <el-input
            v-model="editDialog.data.username"
            size="mini"
          />
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            v-model="editDialog.data.password"
            size="mini"
          />
        </el-form-item>
        <el-form-item label="权限">
          <!-- <el-input
            v-model="editDialog.data.permissionId"
            size="mini"
          /> -->
          <el-select v-model="value" placeholder="请选择权限" size="mini" style="width:100%;" @change="permid">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="电话">
          <el-input
            v-model="editDialog.data.tel"
            size="mini"
          />
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            ref="NewUpload"
            action="http://61.181.255.77:18380/oilSmoke/uploadFile/uploadFile"
            :limit="1"
            :file-list="ImgArr"
            :on-success="UpImgSuc"
            :on-exceed="OverstepLimit"
            list-type="picture-card">
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{file}">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url" alt=""
                >
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <!-- 显示上传图片弹窗 -->
      <el-dialog append-to-body :visible.sync="DialogNewImage">
        <img width="100%" :src="NewImageUrl" alt="">
      </el-dialog>
      <span slot="footer">
        <el-button
          size="small"
          plain
          @click="closeDialog('editDialog')"
        >取 消</el-button>
        <el-popover
          class="edit-dialog-popover"
          placement="top"
          v-model="editDialog.submitVisible"
        >
          <p style="text-align: center; margin-top: 0; color:#409eff">
            确定提交吗？
          </p>
          <div style="text-align: center">
            <el-button
              size="mini"
              @click="editDialog.submitVisible = false"
              v-text="'取 消'"
              plain
            />
            <el-button
              type="primary"
              size="mini"
              v-text="'确 定'"
              v-if="showPrise"
              @click="handleSubmit"
              plain
              id="btn"
            />
            <el-button
              type="primary"
              size="mini"
              v-text="'确 定'"
              v-if="showRentPrise"
              @click="handleAdd"
              plain
            />
          </div>
          <el-button
            slot="reference"
            type="primary"
            size="small"
            v-text="'提 交'"
            plain
          />
        </el-popover>
      </span>
    </el-dialog>
    <!-- 搜索弹出框 -->
    <el-dialog
      :title="searchDialog.title"
      v-if="searchDialog.visible"
      :visible.sync="searchDialog.visible"
      @close="closesearchDialog('searchDialog')"
      width="30%"
    >
      <el-form
        :model="searchDialog.data"
        ref="searchDialog.data"
        label-width="90px"
      >
       <el-form-item label="名称">
          <el-input
            v-model="searchDialog.person_name"
            size="mini"
          />
        </el-form-item>
        <el-form-item label="地址">
          <el-input
            v-model="searchDialog.address"
            size="mini"
          />
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button
          size="small"
          plain
          @click="closesearchDialog('searchDialog')"
        >取 消</el-button>
        <el-button
            slot="reference"
            type="primary"
            size="small"
            v-text="'确 定'"
            @click="searchSubmit"
            plain
          />
        <!-- <el-popover
          class="edit-dialog-popover"
          placement="top"
          v-model="searchDialog.submitVisible"
        >
          <p style="text-align: center; margin-top: 0; color:#409eff">
            确定提交吗？
          </p>
          <div style="text-align: center">
            <el-button
              size="mini"
              @click="searchDialog.submitVisible = false"
              v-text="'取 消'"
              plain
            />
            <el-button
              type="primary"
              size="mini"
              v-text="'确 定'"
              @click="searchSubmit"
              plain
              id="btn"
            />
          </div>
        </el-popover> -->
      </span>
    </el-dialog>
  </div>
</template>
<script>
import ToolsBtn from "../../components/Tools/ToolsBtn";
import TableList from "../../components/Table/TableList";
import TableProp from "../../utils/tableProps.js";
import Pagination from "../../components/Pagination/pagination";
import PageProp from "../../utils/pageProps4.js";
import tFood from "./HFood"
export default {
  name: "FoodData",
  components: {
    ToolsBtn,
    TableList,
    Pagination
  },
  data () {
    return {
      ImgArr:[],
      DialogNewImage: false,
      NewImageUrl:'',
      table: TableProp,
      page: PageProp,
      toolsData: {
        title: "餐饮公司管理",
        oBtnShow: [
          { btn0: true }, // 新增按钮
          { btn1: true }, // 刷新按钮
          { btn2: true }, // 搜索按钮
          { btn3: false }, // 设置按钮
          { btn4: true } // 导出Excel按钮
        ]
      },
      editDialog: {
        title: "编 辑",
        visible: false,
        submitVisible: false,
        data: null
      },
      options: [{
        value: '1',
        label: '超级管理员'
      }, {
        value: '2',
        label: '餐饮公司'
      }, {
        value: '3',
        label: '清洗公司'
      }, {
        value: '4',
        label: '监督人员'
      }],
      value: '',
      permessid: '',
      searchDialog: {
        title: "搜 索",
        visible: false,
        submitVisible: false,
        person_name: '',
        address: ''
      }
    }
  },
  created () {
    this.table.tHead = tFood;
    this.table.identifier = true;
    this.table.hasOperation = true;
    this.table.operation.data = [
      {
        id: 1,
        label: "编 辑",
        Fun: "handleEdit",
        btnType: "text",
        plain: false,
        size: "mini",
        className: "handleEdit"
      }
    ];
    this.getList(1, 10);
  },
  methods: {
    // 删除上传图片
    handleRemove(res){
      this.$confirm("此操作将要删除已上传图片，是否继续？","提示",{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
      })
      .then(()=>{
        if (this.editDialog.data !== undefined) {
          this.editDialog.data.picture_url = ''
        }
        this.$refs.NewUpload.clearFiles()
        this.NewImageUrl = ""
        this.$message({
          type:'success',
          message:'删除成功'
        })
      })
      .catch(()=>{
        this.$message({
          type:'warning',
          message:"你已取消删除操作"
        })
      })      
    },
    // 文件超出数量回调
    OverstepLimit(res){
      this.$message({
        type:'warning',
        message:'文件数量超限'
      })
    },
    // 图片上传成功回调
    UpImgSuc(res){
      this.NewImageUrl = res.url
    },
    // 查看图片
    handlePictureCardPreview(file) {
        this.NewImageUrl = file.url;
        this.DialogNewImage = true;
      },
    // 获取列表数据
    getList(pageNo, pageSize){
      this.table.data = [];
      this.table.loading = true;
      const params = {
        pageNo,
        pageSize
      }
      this.$api.USERMANAGE.getData(params)
      .then(res => {
        this.table.data = res.data;
        this.page.total = res.count
        this.table.loading = false;
      })
      .catch(() => {
        this.$message({
          message: "暂无数据",
          type: 'error'
        });
      })
    },
    // 编辑
    handleEdit(index, row){
      this.editDialog.visible = true;
      this.ImgArr = []
      if (index !== undefined && row !== undefined) {
        if (row.picture_url !== '' && row.picture_url !== null) {
          this.ImgArr.push({name:'1.png',url:row.picture_url})
        }
        this.showPrise = true;
        this.showRentPrise = false; 
        const title = `${row.person_name}编辑`;
        const data = row;
        this.editDialog.title = title;
        this.editDialog.data = data;
        if(row.permissionId === "2"){
          this.value = "餐饮公司"
        } else if(row.permissionId === "1"){
          this.value = "超级管理员"
        } else if(row.permissionId === "3"){
          this.value = "清洗公司"
        } else if(row.permissionId === "4"){
          this.value = "监督人员"
        }
      } else {
        this.showPrise = false;
        this.showRentPrise = true; 
        this.editDialog.title = "添加";
        this.editDialog.data = {};
      }
    },
    handleSubmit(){
      this.editDialog.visible = false;
      this.editDialog.submitVisible = false;
      const params = {
        rid: this.editDialog.data.rid,
        person_name: this.editDialog.data.person_name,
        duties: this.editDialog.data.duties,
        address: this.editDialog.data.address,
        hx_longtitude: this.editDialog.data.hx_longtitude,
        hx_latitude: this.editDialog.data.hx_latitude,
        username: this.editDialog.data.username,
        password: this.editDialog.data.password,
        permissionId: this.permessid == "" ? this.editDialog.data.permissionId : this.permessid,
        tel: this.editDialog.data.tel,
        picture_url:this.NewImageUrl === ""?this.editDialog.data.picture_url:this.NewImageUrl,
        mid: this.editDialog.data.mid
      }
      this.$api.USERMANAGE.upData(params)
      .then(() => {
        this.refresh()
          this.$message({
            message: "修改成功",
            type: 'success'
          });
      })
      .catch(() => {
        this.$message({
          message: "修改失败",
          type: 'error'
        });
      })
    },
    // 删除
    handleDel(){

    },
    // 新增数据
    addData(){
      this.handleEdit();
    },
    handleAdd(){
      this.editDialog.visible = false;
      this.editDialog.submitVisible = false;
      const params = {
        rid: this.editDialog.data.rid,
        person_name: this.editDialog.data.person_name,
        duties: this.editDialog.data.duties,
        address: this.editDialog.data.address,
        hx_longtitude: this.editDialog.data.hx_longtitude,
        hx_latitude: this.editDialog.data.hx_latitude,
        username: this.editDialog.data.username,
        password: this.editDialog.data.password,
        permissionId: this.permessid,
        tel: this.editDialog.data.tel,
        picture_url:this.NewImageUrl,
        mid: null
      }
      this.$api.USERMANAGE.addData(params)
      .then(() => {
        this.getList(1,10)
        this.$message({
          message: "添加成功",
          type: 'success'
        });
      })
      .catch(() => {
        this.$message({
          message: "添加失败",
          type: 'error'
        });
      })
    },
    permid(val){
      this.permessid = val
    },
    // 更新数据
    refresh(){
      this.getList(1,10)
    },
    // 搜索数据
    search(){
      this.searchDialog.visible = true;
      this.searchDialog.submitVisible = true;
    },
    searchSubmit(){
      this.searchDialog.visible = false;
      this.searchDialog.submitVisible = false;
      const params = {}
      this.searchDialog.person_name === null || this.searchDialog.person_name === ""?null :params.person_name = this.searchDialog.person_name
      this.searchDialog.address === null || this.searchDialog.address === ""?null :params.address = this.searchDialog.address
      this.$api.USERMANAGE.getData(params)
      .then(res => {
        this.table.data = res.data;
        this.page.total = res.count
        this.table.loading = false;
      })
      .catch(() => {
        this.table.data = [];
        this.page.total = 0
        this.table.loading = false;
        this.$message({
          message: "暂无数据",
          type: 'error'
        });
      })
    },
    // 分页大小
    pageSizeChange(size) {
      // console.log(`每页 ${size} 条`);
      const tableDataLength = this.table.data.length;
      this.page.pageSize = size;
      if (tableDataLength < this.page.pageSize) {
        this.getList(1, size);
      } else {
        const pageNo = this.page.currentPage;
        this.getList(pageNo, size);
      }
    },
    // 翻页
    pageCurrentChange(pageNo) {
      // console.log(`当前页: ${pageNo}`);
      this.page.currentPage = pageNo;
      const size = this.page.pageSize;
      this.getList(pageNo, size);
    },
    // 关闭模态
    closeDialog(name) {
      if (name === "editDialog") {
        this[name].submitVisible = false;
        this[name].data = null;
      }
      this[name].visible = false;
    },
    closesearchDialog(name){
      if(name === "searchDialog"){
        this[name].submitVisible = false;
        this[name].data = null;
      }
      this[name].visible = false;
    },
    // 设置字段
    fieldSet(){

    },
    // 隐藏表格操作列
    hasOperation(res){
      this.table.hasOperation = res;
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-dialog .el-dialog__title{
  font-size: 12px;
  
}
/deep/ .el-dialog .el-form-item__label{
  font-size: 12px;
}
</style>